<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    body,p,ul,h2{margin:0; padding: 0;}
    li{list-style: none;}
    a{text-decoration: none;color: #000;}
    img{border: none; vertical-align: top;}
    div {width: 500px; height: 160px;margin:50px auto;}
    h2{height:40px;line-height:40px;padding-left:20px;font-size:20px;background: green;color: #fff}
    li{padding-left:20px;font-size: 16px;height: 40px;line-height: 40px;border-bottom: 1px solid #999;}
    img{width: 20px; height: 20px;margin:10px 0 0 10px; cursor: pointer;}
    input{width: 140px; line-height: 20px;height:20px;font-size: 16px;}
    a{margin-left: 10px; padding: 4px; color: green; border-radius: 4px;}
    a:hover{background-color: green;color: #fff;}
    .hide{display: none;}
    .show{display: inline-block;}
</style>
<script type="text/javascript">
window.onload = function (){
    var aLi = document.getElementsByTagName('li');

    for (var i = 0; i < aLi.length; i++) {
    	change(aLi[i]);
    };
    
    function change(obj){
	    var oSpan = obj.getElementsByTagName('span')[0];
	    var oImg = obj.getElementsByTagName('img')[0];
		var oStrong = obj.getElementsByTagName('strong')[0];
	    var oInp = obj.getElementsByTagName('input')[0];
	    var aA = obj.getElementsByTagName('a');
	    oImg.onclick = function (){         //尝试过自动生成，但是笔只能点击一次不能修改多次
	        str = oSpan.innerHTML;          //可能的原因应该是我们生成了oImg而不是使用原来的oImg,导致点击失效
	        this.className = oSpan.className = 'hide';
	        oStrong.className = '';
	        oInp.value = str;        

	        aA[0].onclick = function (){
	            oStrong.className = 'hide';
	            oImg.className = oSpan.className = '';
	            oSpan.innerHTML = oInp.value;
	        }

	        aA[1].onclick = function (){
	            oStrong.className = 'hide';
	            oImg.className = oSpan.className = '';
	            oSpan.innerHTML = str;
	        }
	    }
	}
}
</script>
</head>
<body>
<div>
    <h2>分类名称</h2>
    <ul id="list">
        <li>
            <span>妙味远程课堂</span>
            <img src="pen1.png">
            <strong class="hide">
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </strong>
        </li>
        <li>
            <span>妙味远程课堂</span>
            <img src="pen1.png">
            <strong class="hide">
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </strong>
        </li>
        <li>
            <span>妙味远程课堂</span>
            <img src="pen1.png">
            <strong class="hide">
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </strong>
        </li>
        <li>
            <span>妙味远程课堂</span>
            <img src="pen1.png">
            <strong class="hide">
                <input type="text">
                <a href="javascript:;">保存</a>
                <a href="javascript:;">取消</a>
            </strong>
        </li>
    </ul>
</div>
</body>
</html>